<script setup>
import { ref } from 'vue'
import ChooseSku from '@/components/ChooseSku.vue';
import SkuCardItem from './SkuCardItem.vue';
import {
  sku_card_list,
  addSkuCardEvent,
  btnLoading,
  handleUpdate,
  handleDelete,
  sortCard,
  bodyLoading,
  handleChooseSetGoodsSkusCard
} from '@/composables/useSku.js'

const chooseSkuRef = ref(null)
const handleChooseSku = (item) => {
  chooseSkuRef.value.open((value) => {
    console.log(value);
    handleChooseSetGoodsSkusCard(item.id, {
      name: value.value.name,
      value: value.value.list
    })

  })
}
</script>

<template>
  <el-form-item label="商品规格" v-loading="bodyLoading">
    <el-card v-loading="item.loading" shadow="never" class="w-full mb-3" v-for="(item, index) in sku_card_list"
      :key="item.id">
      <template #header>
        <div class="flex items-center">
          <el-input @change="handleUpdate(item)" v-model="item.text" placeholder="规格名称" style="width: 200px;">
            <template #append>
              <el-icon class="cursor-pointer" @click="handleChooseSku(item)">
                <more></more>
              </el-icon>
            </template>
          </el-input>
          <el-button :disabled="index === sku_card_list.length - 1" @click="sortCard('down', index)" class="ml-auto"
            size="small">
            <el-icon>
              <Bottom></Bottom>
            </el-icon>
          </el-button>
          <el-button :disabled="index === 0" @click="sortCard('up', index)" size="small">
            <el-icon>
              <Top></Top>
            </el-icon>
          </el-button>
          <el-popconfirm @confirm="handleDelete(item)" confirm-button-text="确认" cancel-button-text="取消"
            title="你确定要删除吗?">
            <template #reference>
              <el-button size="small">
                <el-icon>
                  <Delete></Delete>
                </el-icon>
              </el-button>
            </template>
          </el-popconfirm>

        </div>
      </template>

      <SkuCardItem :skuCardId="item.id"></SkuCardItem>
    </el-card>
    <el-button type="success" size="small" :loading="btnLoading" @click="addSkuCardEvent">添加规格</el-button>
  </el-form-item>
  <ChooseSku ref="chooseSkuRef"></ChooseSku>

</template>
<style scoped>
:deep(.el-card__header) {
  @apply !p-2 bg-gray-50;
}
</style>
